import { List, Icon, Grid, InputItem, Popup } from 'antd-mobile';
import { WhiteSpace } from 'antd-mobile';

class AutoCompletePicker extends React.Component {
	constructor(props) {
    	super(props);

    	this.state = {
    		text: this.props.value,
    		items: [],
    		selected: false,
    	};
    	this.expect = false;
  	}

  	componentWillReceiveProps(nextProps) {
  	}

  	componentDidMount() {
  		this.fetchTips("");
  	}

  	updateInput(text) {
  		this.expect = text;
  		this.setState({text, selected: null});

  		if (! this.state.loading) {
  			this.fetchTips(this.expect);
  		}
  	}

  	fetchTips(keyword) {
  		this.setState({loading: true});

  		fetch(`${this.props.url}?q=${keyword}`).then(resp => resp.json()).then(resp => {
  			this.setState({loading: false, items: resp});
  			
  			if (this.expect != keyword) {
  				this.fetchTips(this.expect);
  			}
  		});
  	}

  	selectItem(item) {
  		this.setState({selected: item, text: item.label});
  	}

  	handleConfirm() {
  		Popup.hide();
  		this.props.onChange({text: this.state.text, selected: this.state.selected});
  	}

	render() {
		const styles = {
			container: {
				zIndex: 9, 
				position: 'fixed', 
				left: 0, 
				right: 0, 
				top: 0, 
				bottom: 0, 
				background: '#f5f5f9'
			},
			top: {
				position: 'absolute',
				top: 0,
			},
			bottom: {
				position: 'absolute',
				bottom: 0,
			},
			tip: {
				paddingLeft: '0.3rem', 
				color: '#888'
			}
		};
		return (
			<div >
		      	<List renderHeader={() => (
		      		<div style={{ position: 'relative' }}>
	          			{this.props.title}
						<span
						style={{position: 'absolute', right: 3, top: -5, color: '#108ee9'}}
						onClick={() => this.handleConfirm()}
						>
						确认
						</span>
	        		</div>
	        	)}>
		          <InputItem placeholder={this.props.placeholder}
		          	value={this.state.text}
		          	onChange={(v) => this.updateInput(v)}
		          />
		        </List>
		        <WhiteSpace />
		        <div style={{minHeight: '7.25rem'}}>
		        	{this.state.loading ? <span style={styles.tip}>正在搜索</span> : 
		        		(this.state.items.length ? this.state.items.map((x, i) => (
				        <List key={i}>
					    	<List.Item onClick={() => this.selectItem(x)}>{x.label}</List.Item>
					    </List>
				        )) : <span style={styles.tip}>无搜索结果</span>
			        )}
		        </div>
	      	</div>
		);
	}
}

export default class AutoComplete extends React.Component {
	constructor(props) {
    	super(props);

    	this.state = Object.assign({}, this.props.value);
  	}

  	componentWillReceiveProps(nextProps) {
  		this.setState(Object.assign({}, nextProps.value));
  	}

  	componentDidMount() {
  	}

  	handleClose(type) {
		Popup.hide();
  	}

  	handleClose(v) {

  	}

  	handleChnage(text, sel) {
  		let value = {label: sel ? sel.label : text, value: sel ? sel.value : ''};
  		this.setState(value);
  		this.props.onChange(value);
  	}


  	showPopup() {
  		const {title, url, placeholder} = this.props;
  		Popup.show(<AutoCompletePicker
  			url={url} 
  			placeholder={placeholder} 
  			title={title} 
  			value={this.state.label}
  			onChange={(v) => this.handleChnage(v.text, v.selected)}/>, 
  			{ animationType: 'slide-up', maskClosable: true });
  	}

	render() {
		return (
			<List.Item extra={this.state.label} onClick={() => this.showPopup()} arrow="horizontal">{this.props.title}</List.Item>
		);
	}
}